<template>
    <div class="message-swiper-box">
        <div
            class="message-swiper"
            v-if="isShow"
        >
            <swiper
                class="message-box swiper-no-swiping"
                :options="swiperOption"
            >
                <swiper-slide
                    class="message-item"
                    v-for="(item,index) of messageSwiperList"
                    :key="index"
                >{{item}}
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MessageSwiper',
    data() {
        return {
            isShow: true,
            swiperOption: {
                direction: 'vertical',
                autoplay: 2000,
                loop: true,
                observer: true
            },
            messageSwiperList: [
                '刚刚梁**升级成为了店主',
                '刚刚陈**升级成为了店主',
                '刚刚李**升级成为了店主',
                '刚刚谭**升级成为了店主',
                '刚刚宋**升级成为了店主',
                '刚刚张**升级成为了店主',
                '刚刚赵**升级成为了店主',
                '刚刚孙**升级成为了店主',
                '刚刚周**升级成为了店主',
                '刚刚王**升级成为了店主',
                '刚刚冯**升级成为了店主',
                '刚刚朱**升级成为了店主',
                '刚刚秦**升级成为了店主',
                '刚刚何**升级成为了店主',
                '刚刚吕**升级成为了店主'
            ]
        }
    },
    activated() {
        this.isShow = true
    },
    deactivated() {
        this.isShow = false
    }
}
</script>

<style lang="stylus" scoped>
.message-swiper-box
    margin-top 0.18rem
    padding 0.24rem 0.4rem
    background #fff
    .message-swiper
        display flex
        align-items center
        height 1.11rem
        background-image url('../../../assets/images/home/message-swiper-bg.png')
        background-repeat no-repeat
        background-size 100%
        background-color #fff
        padding 0 0.6rem
        .message-icon
            width 0.51rem
            height 0.46rem
        .message-box
            flex 1
            min-width 1px
            margin-left 0.26rem
            height 1.11rem
            overflow hidden
            .message-item
                line-height 1.21rem
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
                font-size 0.3rem
                color #333
</style>

